<template>
	<div class="body">
		<!-- 顶部信息栏 -->
		<div class="top_nav">
			<div class="top_nav_left"><van-icon name="arrow-left" @click="back"/></div>
			<div class="top_nav_mid">砍价列表</div>
		</div>
		
		<div class="mid_mid"></div>
		
		<!-- 商品卡片 -->
		<div class="kan_body">
			<div class="kan_body_item" v-for="(item,index) in this.$store.state.kanjiaList" :key="index" 
			 @click="kanjia_goto(item)">
					<img :src="item.pic">
				<div class="kan_body_right">
					<div class="div_font">{{item.name}}</div>
					<div class="span_font">{{item.characteristic}}</div>
					<div class="more_span">
						<span class="span_left">
							<div class="span_left_top">￥{{item.minPrice}}</div>
							<div class="span_left_down">低价</div>
						</span>
						<span class="span_mid">
							<div class="span_left_top">{{item.originalPrice}}</div>
							<div class="span_left_down">原价</div>
						</span>
						<span class="span_mid_last">
							<div class="span_left_top">{{item.stores}}</div>
							<div class="span_left_down">限量</div>
						</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="mid_mid_two"></div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.$APIClient.kanjiaItem().then(res => {
				this.$store.state.kanjiaList = res.data.data.goodsMap
			})
		},
		methods:{
			back(){
				this.$router.push({
					path:'index'
				})
			}
		}
	}
</script>

<style scoped>
	.top_nav
	{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 4.6rem;
		align-items: center;
	}
	
	.top_nav_mid
	{
		margin-left: 10.2rem;
		margin-top: -4px;
	}
	
	.top_nav_left
	{
		margin-left: 2.7rem;
	}
	
	.kan_body_right
	{
		margin-left: 1rem;
	}
	
	.kan_body_item
	{
		width: 100%;
		height: 10rem;
		margin-top: 1rem;
		border-bottom: 0.05rem solid #E9E9E9;
		display: flex;
	}
	
	.div_font
	{
		margin-bottom: 0.5rem;
	}
	
	.kan_body_item img
	{
		width: 10rem;
		height: 10rem;
		margin-top: -7px;
		border-radius: 6%;
	}
	
	.span_font
	{
		color: #B2B2B2;
		font-size: 0.24rem;
		margin-bottom: 1.2rem;
	}
	
	.span_left .span_left_top
	{
		color: #D00000;
		margin-bottom: 0.3rem;
		font-weight: 700;
	}
	
	.span_left_down
	{
		font-size: 0.3rem;
	}
	
	.more_span
	{
		display: flex;
		margin-left: -2.5rem;
	}
	
	.more_span span
	{
		margin-left: 2.5rem;
	}
	
	.mid_mid
	{
		height: 42px;
	}
	
	.body
	{
		width: 100%;
		height: 100%;
	}
	
	.mid_mid_two
	{
		height: 70px;
	}
</style>
